<template>
	<u-popup :show="show" round="30rpx" mode="center" @close="onCancel">
		<view class="popup">
			<view class="title">{{ contact }}</view>
			<view class="phone">{{ phone }}</view>
			<view class="work-time">
				<view v-if="workTime" class="item">工作时间：工作日 {{ workTime }}</view>
				<view v-if="noWorkTime" class="item">非工作日 {{ noWorkTime }}</view>
			</view>
			<view class="button">
				<button class="cancel" @click="onCancel">取消</button>
				<button class="copy" @click="onCopyPhone">复制号码</button>
			</view>
		</view>
	</u-popup>
</template>

<script lang="ts" setup>
	import { onCopy } from '@/utils';
	
	const emits = defineEmits(['update:show' ,'cancel']);
	const props = defineProps({
		show: {
			type: Boolean,
			default: false,
		},
		contact: {
			type: String,
			default: '客服电话',
		},
		phone: {
			type: String,
			default: '',
		},
		workTime: {
			type: String,
			default: '',
		},
		noWorkTime: {
			type: String,
			default: '',
		},
	});
	const onCancel = (): void => {
		emits('update:show', false);
		emits('cancel', false);
	};
	const onCopyPhone = (): void => {
		onCancel();
		onCopy(props.phone);
	};
</script>

<style lang="scss" scoped>
	.popup {
		width: 642rpx;
		background: #fff;
		border-radius: 30rpx;
		padding: 40rpx;
		box-sizing: border-box;
		.title {
			line-height: 32rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #242424;
			text-align: center;
			margin-bottom: 54rpx;
		}
		.phone {
			line-height: 48rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: #242424;
			text-align: center;
			margin-bottom: 40rpx;
		}
		.work-time {
			line-height: 24rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #707070;
			text-align: center;
			margin-bottom: 57rpx;
			.item {
				margin-bottom: 20rpx;
			}
		}
		.button {
			display: flex;
			justify-content: space-between;
			.cancel,
			.copy {
				width: 268rpx;
				height: 88rpx;
				background: #EEEEEE;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #545454;
				margin: 0;
				&::after {
					border: 0;
				}
			}
			.copy {
				background: #3E9DBB !important;
				color: #fff;
			}
		}
	}
</style>